<script setup lang="ts">

import {ElCol, ElRow} from "element-plus";
</script>

<template>
  <el-row class="app-info">
    <!-- 首页（聊天页面）   -->
    <router-link :to="{name:'HomePage'}">
      <el-col :span="6">
        <div class="myText">
          <img src="@/assets/HomePage/message.svg" alt="微信" class="myImg"/>
          <span class="myTextSpan">微信</span>
        </div>
      </el-col>
    </router-link>

    <!--  通讯录  -->
    <router-link :to="{name:'AddressView'}">
      <el-col :span="6">
        <div class="myText">
          <img src="@/assets/HomePage/address_list.svg" alt="通讯录" class="myImg"/>
          <span class="myTextSpan">通讯录</span>
        </div>
      </el-col>
    </router-link>

    <!--   发现 -->
    <router-link :to="{name:'discover'}">
      <el-col :span="6">
        <div class="myText">
          <img src="@/assets/HomePage/discovery.svg" alt="发现" class="myImg"/>
          <span class="myTextSpan">发现</span>
        </div>
      </el-col>
    </router-link>

    <!--  “我”页面（个人用户管理）  -->
    <router-link :to="{name:'MyHomePage'}">
      <el-col :span="6">
        <div class="myText">
          <img src="@/assets/HomePage/me.svg" alt="我" class="myImg"/>
          <span class="myTextSpan">我</span>
        </div>
      </el-col>
    </router-link>
  </el-row>

</template>

<style scoped>

.app-info {
  position: fixed; /*固定在底部*/
  bottom: 0;
  /*
  left: 10px;
  */
  width: 100%;
  display: flex;
  /*
  justify-content: space-between;
  */
  justify-content: space-around;
  flex-direction: row;
  align-items: center;
  /*
  padding: 5px 10px 0 10px;
  */
  padding: 5px 0 0 15px;
  background-color: #f5f5f5;
}

/*设置图片大小*/
.myImg{
  max-width: 35px; height: auto;
}

.myText{
  display: flex;
  flex-direction: column; /* 让图标和文字垂直排列 */
  align-items: center;     /* 水平居中（图标和文字都居中） */
}

.myTextSpan {
  margin-top: 2px; /* 可调整文字与图片的间距 */
  font-size: 16px; /* 可调整文字大小 */
  white-space: nowrap; /* 强制文字不换行，确保横向排列 */
}

/* 在原有的style scoped中添加以下代码 */
:deep(a) {
  text-decoration: none; /* 去掉链接默认的下划线 */
  color: inherit; /* 可选：继承父元素的文字颜色，避免链接默认的蓝色 */
}

</style>